<template>
    <meta-header :metaInfo="metaInfo"></meta-header>
    <div class="home-body">
      <section>
        <h5 class="float-block">Clients 
          <n-icon class="add-i shadow-click" @click="addClient()"><AddBoxOutlined/></n-icon> 
        </h5>
        <clients ref="clientRef"></clients>
      </section>
      <section>
        <h5 class="float-block"> Groups 
          <n-icon class="add-i shadow-click" @click="addGroupMap"><AddBoxOutlined/></n-icon> 
        </h5>
        <Groups ref="groupRef"></Groups>
      </section>
      <section>
        <h5 class="float-block"> Tasks 
          <n-icon class="add-i shadow-click" @click="addTask"><AddBoxOutlined/></n-icon> 
        </h5>
        <Tasks ref="taskRef"></Tasks>
      </section>
    </div>

    <RunnginSync ref="runnginSyncRef"></RunnginSync>

    <div class="float-task">
      <n-button  strong secondary circle type="error"
        @click="logout" title="logout" 
          v-if="hasAccount">
        <n-icon class="icon-normal"><LogOutRound/> </n-icon>
      </n-button>
      <br/>
      <n-button strong secondary circle type="error"
        @click="showRunnginSyncRef" title="Running Task">
        <n-icon class="icon-normal"><HistoryFilled/> </n-icon>
      </n-button>
    </div>

    <div style="height: 80px"></div>
</template>

<script>
import { ref } from 'vue'
import MetaHeader from '/src/components/vue-meta/meta-header.vue'
import Clients from './fsync/clients.vue'
import Groups from './fsync/groups.vue'
import Tasks from './fsync/tasks.vue'
import RunnginSync from './fsync/running-sync.vue'
import { AddBoxOutlined, LogOutRound, HistoryFilled } from '@vicons/material'
import globalStore from '/src/components/pinia/store.js'
import serverApi from '/src/api/fsync/server.js'
import { useRouter } from 'vue-router'

export default {
  components: {
    MetaHeader, Clients, Groups,
    AddBoxOutlined, Tasks, RunnginSync, 
    LogOutRound, HistoryFilled,
  },
  setup() {
    const clientRef = ref(null)
    const addClient = () => {
      clientRef.value.showAdd()
    }

    const groupRef = ref(null)
    const addGroupMap = () => {
      groupRef.value.addGroupMap()
    }

    const taskRef = ref(null)
    const addTask = () => {
      taskRef.value.showAdd()
    }

    const store = globalStore()
    const router = useRouter()
    const logout = () => {
      serverApi.logout().then(res => {
        store.clearToken()
        router.push("/login")
      })
    }

    const hasAccount = store.hasAccount

    const runnginSyncRef = ref(null)
    const showRunnginSyncRef = () => {
      runnginSyncRef.value.show()
    }

    return {
      clientRef, addClient, groupRef, addGroupMap, taskRef, addTask, logout,
      hasAccount, runnginSyncRef, showRunnginSyncRef
    }
  },
  computed: {
    metaInfo() {
      return {
        title: 'JSyncFile'
      }
    }
  },
}
</script>

<style scoped lang="scss">
section{
  margin: 1em 2em; 
}

h5{
  &:hover {
    .add-i{
      visibility: visible;
      //display: inline;
    }
  }
}
.add-i{
  font-size: 1.6em;
  vertical-align: middle;
  color: #7ca2eb;
  visibility: hidden;
  //display: none;
}

.float-task{
  position: fixed;
  right: 1em;
  bottom: 1em;
  z-index: 3000;
}
</style>
